<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html"/>
<title>嘉兴智慧教育</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
ol,ul,li,input,a{list-style:none;font-style: normal;text-decoration:none; color: #333;}
.chstyle{
    width: 1024px;
    padding-top: 15px;
    margin: auto;
}
.chstylebot{
    width: 120px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: auto;
}
.chstyle img{
    width:700px;
}
#chstylebut{
    width: 120px;
    height: 30px;
    line-height: 26px;
    background: #2f4050;
    color: #fff;
    cursor: pointer;
    border: none;
}
#chstylebut:hover{
    background: #182532;
}
.chstyletit{
    width: 250px;
    overflow: hidden;
    margin: auto;
    height: 50px;
}
.chstyletit li{float: left;}
.chstylel{
    width: 70px;
    height: 25px;
    border: 1px #38aef4 solid;
    margin: 0 10px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    color: #38aef4;
    line-height: 25px;
}
.chstylel:hover{
    color: #fff;
    background: #38aef4;
}
.chhere{
    color: #fff !important;
    background: #38aef4 !important;
}
.chstylepic{
    text-align: center;
}
#tabCon{
 clear: both;
 overflow: hidden;
}
#tabCon_1{
display: none;
}
</style>
<script language='javascript' type='text/javascript'>
    function changeTab(tabCon_num){
    for(i=0;i<=1;i++) { 
     document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏 
     document.getElementById("tabCo_"+i).className="chstylel";// 
     } 
     document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层 
     document.getElementById("tabCo_"+tabCon_num).className="chstylel chhere";// 
    } 
</script> 

</head>
<body style="margin:0px;padding:0px;">
    <div class="chstyle">
        <ul>
            <li>
                <div id="tanContainer" class="">
                    <div id="tab" class="chstyletit">
                        <ul>
                            <li class="chstylel chhere" id="tabCo_0" onclick="changeTab('0')">样式1</li>
                            <li class="chstylel" id="tabCo_1" onclick="changeTab('1')">样式2</li>
                        </ul>
                    </div>
                    <div id="tabCon" class="chstylepic">
                        <div id="tabCon_0"><img src="image/style1.png"></div>
                        <div id="tabCon_1"><img src="image/style2.png"></div>
                    </div>
                </div>
            </li>
            <li class="chstylebot"><input type="submit" id="chstylebut" value="保存"></li>
        </ul>
    </div>
    
</body>
</html>